<template>
  <div id="background">
    <div class="container">
      <form action="">
        <h1>进入id为{{InputId}}的面板</h1>
        <div class="form">
          <input type="text" placeholder="请输入密码" v-model="Inputpwd"/>
          <div></div>
          <span @click="Cancel" class="btn">取消</span>
          <span @click="Create" class="btn">确认</span>
          <span @click="OnlyRead" class="btn">游客模式</span>
          <div class="canvasBox" ref="box"></div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "IntoWhiteBoard",
  data() {
    return {
      InputId:this.$route.query.id,
      Inputpwd:null,
      Password:null
    }
  },
  mounted() {

  },
  methods:{
    //  取消
    Cancel(){
      this.$router.go(-1);
    },
  //  确认
    Create(){
      var that=this;
      axios
          .get('http://localhost:8080/panel/'+this.InputId)
          .then(function (response) {

            if(that.Inputpwd==response.data.data.pwd){
              that.$router.push({ path: '/WhiteBoard', query: { id: that.InputId,json:response.data.data.json} })
            }else{
              alert("密码错误！")
            }
          })
    },
  //  游客模式
    OnlyRead(){
      var that=this;
      axios
          .get('http://localhost:8080/panel/'+this.InputId)
          .then(function (response) {
              that.$router.push({ path: '/WhiteBoard', query: { id: that.InputId,json:response.data.data.json,onlyread:true} })
          })
    }

  }

}
</script>

<style scoped>
#background {
  width: 100%;
  height: 100%;
  background: url('../../images/1.png');
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  width: 480px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #00000090;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;
}
.container h1 {
  color: aliceblue;
  margin-left: 20px;
  font-size: 30px;
}
input {
  margin-left: 40px;
  padding: 4px;
  margin-bottom: 20px;
  border: solid 1px #4e5ef3;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  height: 23px;
  background: #f1f1f190;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
.btn {
  /* position: relative; */
  display: inline-block;
  font-size: 15px;
  background: rgba(35, 19, 252, 0.425);
  border-radius: 10px;
  margin-top: 18px;
  box-shadow: none;
  color: white;
  margin-left: 40px;
  margin-right: 10px;
  margin-bottom:50px ;
  padding: 5px 10px;
}
</style>
